<template>
  <div>
    <h3>亲！填写以下信息，可以更快更好的帮您找到合适定制师哦！</h3>
    <!-- 出行时间填写 -->
    <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="100px" class="demo-ruleForm" size="mini">
  <el-form-item label="目的地" prop="orderFormDestination" >
    <el-input v-model="orderForm.orderFormDestination"></el-input>
  </el-form-item>
  <el-form-item label="出发地" prop="orderFormOrigin" >
    <el-input v-model="orderForm.orderFormOrigin"></el-input>
  </el-form-item>
 
  <!-- 出行时间填写 -->
  <el-form-item label="出行日期" prop="orderFormDate">
    <el-date-picker v-model="orderForm.orderFormDate" type="date"  value-format="yyyy-MM-dd"/>
  </el-form-item>

  <el-form-item label="计划天数" prop="orderFormTime" >
    <el-input v-model="orderForm.orderFormTime"></el-input>
  </el-form-item>
  <!-- 出行人数填写 -->
  <el-form-item label="出行人数" prop="orderFormPeopleNum">
        <el-input-number size="mini" :max="16" :min="0" v-model="orderForm.orderFormPeopleNum" controls-position="right"></el-input-number>
  </el-form-item>
<!-- 出行预算填写 -->
  <el-form-item label="出行预算" prop="orderFormBudget">
    <el-input v-model="orderForm.orderFormBudget" placeholder="暂不确定可不填写"></el-input>
  </el-form-item>
 
  <!--服务选择框  -->
<el-from-item style="margin-left: 30px">
    需求定制：
    
    <el-checkbox v-model="air" label="机票" border size="medium"></el-checkbox>
    <el-checkbox v-model="train" label="动车" border size="medium"></el-checkbox>
    <el-checkbox v-model="hotl" label="酒店" border size="medium"></el-checkbox>
    <el-checkbox v-model="driver" label="司机" border size="medium"></el-checkbox>

  </el-from-item>

<br><br>
<!-- 备注输入框 -->
<el-form-item label="其他需求">
    <el-input type="textarea" v-model="orderForm.orderFormDesc" placeholder="选填，您可以在此处填写您的个性化需求，或对景区，酒店，出行方式等提出具体要求。"></el-input>
  </el-form-item>

  
 <!-- 信息确认或重置按钮 -->
 <el-form-item>
    <el-button type="primary" @click="submitForm()">立即定制</el-button>
    <el-button @click="resetForm('orderForm')">重置</el-button>
  </el-form-item>

  <!-- 用户id（隐藏域） -->
  <el-form-item  prop="userId">
    <el-input type="hidden" v-model="orderForm.userId" style="width: 340px;" />
  </el-form-item>
  

</el-form>


  </div>
</template>

<script>
 export default {
    data() {
      return {
        orderForm: {
          orderFormAirTicketService:0,
          orderFormBulletTrain:0,
          orderFormAccommodationService:0,
          orderFormDriver:0
          
        },
        rules: {
          orderFormDestination: [
            { required: true, message: '请填写您的目的地', trigger: 'blur' }
          ],
          orderormDate: [
            { type: 'date', required: true, message: '请选择出行日期', trigger: 'change' }
          ]
          
        }
      };
    },
    methods: {
      check(){
        if(this.air==true){
          this.orderForm.orderFormAirTicketService=1;
        }
        if(this.air==false){
          this.orderForm.orderFormAirTicketService=0;
        }

        if(this.train==true){
          this.orderForm.orderFormBulletTrain=1;
        }
        if(this.train==false){
          this.orderForm.orderFormBulletTrain=0;
        }

        if(this.hotl==true){
          this.orderForm.orderFormAccommodationService=1;
        }
        if(this.hotl==false){
          this.orderForm.orderFormAccommodationService=0;
        }

        if(this.driver==true){
          this.orderForm.orderFormDriver=1;
        }
        if(this.driver==false){
          this.orderForm.orderFormDriver=0;
        }
        
      },
      submitForm() {
        // 获取飞机，用车等选项数值
        this.check();

        //接取用户id值 
        this.orderForm.userId = 12311;
        
        // 提交
        this.$axios.put("/orders/submit",this.orderForm).then((response) => {
            if(response.data.code == 200){
              this.$message.success(response.data.message);
              this.orderForm = {};
            }else{
              this.$message.error("提交失败！");
            }
            this.$router.push("/index");
        });
          
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
    
</style>